import React from 'react';

class CustomTextInput extends React.Component {
  render() {
    // 使用 `ref` 的回调函数将 text 输入框 DOM 节点的传给外出的组件设置
    return (
      <div>
        <input
          type="text"
          ref={this.props.inputRef}
        />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.props.inputFocus}
        />
      </div>
    );
  }
}

class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    // 组件挂载后，让文本框自动获得焦点
    this.handleInputFocus();
  }

  handleInputFocus() {
    this.textInput.focus();
  }

  render() {
    return (
      // 可以在组件间传递回调形式的 refs
      // 就像你可以传递通过 React.createRef() 创建的对象 refs 一样
      <CustomTextInput
        inputRef={el => this.textInput = el}
        inputFocus={ () => { this.handleInputFocus() } } />
    );
  }
}

export default class CallbackRefs extends React.Component {
  render() {
    return <AutoFocusTextInput />;
  }
}